<script setup lang="ts">
import { ref } from "vue";

const imgUrl = ref(
  "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png1",
);
const msg = ref("百度一下");
const flag = ref(0);
</script>

<template>
  <div id="app">
    <div class="box" @click="flag = 0" :class="{ active: flag === 0 }">
      选择1
    </div>
    <div class="box" @click="flag = 1" :class="{ active: flag === 1 }">
      选择2
    </div>
    <!-- 正常写法 -->
    <img v-bind:src="imgUrl" v-bind:alt="msg" />
    <!-- 简写 -->
    <img :src="imgUrl" :alt="msg" />
  </div>
</template>

<style>
.box {
  width: 200px;
  height: 80px;
  background-color: aqua;
}
.active {
  background-color: greenyellow;
  font-weight: bold;
  color: red;
}
</style>
